/* pages/tools/tools.wxss */
$color:#f4f006;
$bg:#ECF2FF;

.tools-page {
  height: 100vh;
  background-color: $bg;
}

.tools-header {
  padding-top: 100rpx;
  height: 100rpx;
  display: flex;
  align-items: center;
  padding-left: 20rpx;
  font-size: 50rpx;
  color: #4e4e4e;
  font-weight: bold;

  .icon {
    font-size: 40rpx;
  }
}

.tools-box {
  width: 750rpx;

  border-radius: 24rpx;

  padding: 40rpx 0;
  margin: 40rpx auto;
  display: flex;
  justify-content: center;
  align-items: center;
  flex-flow: row wrap;
  .item {
    flex: 0 0 600rpx;
    border-radius: 20rpx;
    background: linear-gradient(to right, #D7F1FF, #D7F1FF);
    display: flex;
    justify-content: center;
    align-items: center;
    font-weight: bold;
    margin: 30rpx 0;
    font-size: 50rpx;
    padding: 40rpx 0;
    position: relative;

    .icon {
      position: absolute;
      right: 5rpx;
      opacity: 0.7;
      color: #fff;
    }

  }

  .item1 {
    background: linear-gradient(to right, #FFF9F0, #FFF3DF);
  }

  .item2 {
    background: linear-gradient(to right, #FFECE7, #FFEBE6);
  }

  .tools-down {
    width: 600rpx;
    margin: 30rpx auto;
    text-align: center;
    padding: 0;
    display: flex;
    flex-flow: row wrap;
    justify-content: space-between;

    .down-item {
      width: 190rpx;
      height: 190rpx;
      background: #FFEBE6;
      display: flex;
      align-items: center;
      justify-content: center;
      position: relative;
      border-radius: 20rpx;
      margin: 10rpx 0;
      opacity: 0.8;
    }
  }
}